<script setup lang="ts">
import { ref, computed, onBeforeMount, onMounted, onUnmounted, readonly,inject } from 'vue'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useRouter, useRoute } from 'vue-router';
import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";
import svgIcon from '@/components/base-svgIcon/index.vue';
import iconbtn from '@/components/icon-btn/index.vue';
import { setUrl } from "@/service/sseUrl";
import Papa from "papaparse";
import { HotTable, HotColumn } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
import { Editor, RowFlex } from '@hufe921/canvas-editor'

const data=inject('data');

console.log(data,'555555555555555555555');
registerAllModules();
registerCellType(NumericCellType);
registerPlugin(UndoRedo);
const baseCardRef = ref<any>(null)
const contentBoxRef = ref(null)
const router = useRouter()
const route = useRoute()
const qd: any = route.query.data
const str = decodeURIComponent(qd)
const qdArr = JSON.parse(str)
const queryData = ref()
const showData = ref()
queryData.value = qdArr
console.log(queryData.value);
const scrollHeight = ref()
const directory = ref([]);
const breadcrumbItem = ref<any>([])

const iconList = ref([
    { spanClass: '#icon-chuangjianwenjian', name: '新建' },
    { spanClass: '#icon-shezhi1', name: '编辑' },
    { spanClass: '#icon-daochuwenjian2', name: '导出' },
    { spanClass: '#icon-yidongwenjianjia--copy', name: '移位' },
])

const settings = ref<any>(
    {
        language: 'zh-CN', // 官方汉化
        licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明
        // colHeaders: ['文件名', '文件格式', '创建时间'],
        // columns: [
        //     {
        //         data: "文件名",
        //         readOnly: false,
        //         type: "text",
        //         dateFormat: null,
        //         source: null,
        //         strict: false,
        //         numericFormat: null
        //     },
        //     {
        //         data: "文件格式",
        //         readOnly: false,
        //         type: "text",
        //         dateFormat: null,
        //         source: null,
        //         strict: false,
        //         numericFormat: null
        //     },
        //     {
        //         data: "创建时间",
        //         readOnly: false,
        //         type: "text",
        //         dateFormat: null,
        //         source: null,
        //         strict: false,
        //         numericFormat: null
        //     }
        // ],
        // data: [
        //     {
        //         "文件名": "1车间1月份生产记录",
        //         "文件格式": "word",
        //         "创建时间": "2021-08-17 10:30:00"
        //     },
        //     {
        //         "文件名": "1车间2月份生产记录",
        //         "文件格式": "word",
        //         "创建时间": "2021-08-17 10:30:00"
        //     },
        //     {
        //         "文件名": "1车间3月份生产记录",
        //         "文件格式": "word",
        //         "创建时间": "2021-08-17 10:30:00"
        //     },
        //     {
        //         "文件名": "1车间4月份生产记录",
        //         "文件格式": "word",
        //         "创建时间": "2021-08-17 10:30:00"
        //     },
        //     {
        //         "文件名": "2车间5月份生产记录",
        //         "文件格式": "word",
        //         "创建时间": "2021-08-17 10:30:00"
        //     },
        //     {
        //         "文件名": "3车间6月份生产记录",
        //         "文件格式": "word",
        //         "创建时间": "2021-08-17 10:30:00"
        //     }
        // ],
        //colHeaders     
        // colHeaders: [
        //     "病人姓名",
        //     "病人身份证号",
        //     "病人类型"
        // ],
        colHeaders: [],
        // data:exceldata,
        // columns:[],
        // data: [
        //     {
        //         "id": "e46d8aa4c63d409e",
        //         "应用名称": "质检登记",
        //         "缩写": "zjdj",
        //         "图标名": "#icon-wenjianjia",
        //         "类型": "formdata",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "e46d8t33c63d4091",
        //         "应用名称": "成本报表",
        //         "缩写": "bxbd",
        //         "图标名": "#icon-dangan1",
        //         "类型": "excel",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "89f05b55d5c1ba02",
        //         "应用名称": "物联网数据汇总",
        //         "缩写": "bxzhcx",
        //         "图标名": "#icon-dangan2",
        //         "类型": "echars-excel",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "38f7qwe78dda2a43",
        //         "应用名称": "订单销售表",
        //         "缩写": "ddxsb",
        //         "图标名": "#icon-pdf",
        //         "类型": "word",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "38f7dasd8dda2a44",
        //         "应用名称": "签批文件",
        //         "缩写": "qpwj",
        //         "图标名": "#icon-Excel",
        //         "类型": "echars-word",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "38f7ass278dda2a5",
        //         "应用名称": "数据驾驶舱",
        //         "缩写": "sjjsc",
        //         "图标名": "#icon-wenjiangui",
        //         "类型": "echars-3d",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "38f71zcx78dda2a6",
        //         "应用名称": "公司制度",
        //         "缩写": "gszd",
        //         "图标名": "#icon-wenjian1",
        //         "类型": "word",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "38f71cxz8dda2a47",
        //         "应用名称": "报销单据",
        //         "缩写": "bxdj",
        //         "图标名": "#icon-wenjian1",
        //         "类型": "excel",
        //         "排序": "desc"
        //     },
        //     {
        //         "id": "38f713378ddf2a48",
        //         "应用名称": "请假单1",
        //         "缩写": "qjd1",
        //         "图标名": "#icon-weishenhe",
        //         "类型": "excel",
        //         "排序": "desc"
        //     }
        // ],
        //columns        
        // columns: [

        // {
        //     data: "病人姓名",
        //     readOnly: false,
        //     type: "text",
        //     dateFormat: null,
        //     source: null,
        //     strict: false,
        //     numericFormat: null
        // },
        // {
        //     data: "病人身份证号",
        //     readOnly: false,
        //     type: "text",
        //     dateFormat: null,
        //     source: null,
        //     strict: false,
        //     numericFormat: null
        // },
        // {
        //     data: "病人类型",
        //     readOnly: false,
        //     type: "text",
        //     dateFormat: null,
        //     source: null,
        //     strict: false,
        //     numericFormat: null
        // }
        // ],
        //data
        // data: [
        // {
        //     "病人姓名": "测试",
        //     "病人身份证号": "123456789",
        //     "病人类型": "贫困户"
        // },
        // {
        //     "病人姓名": "张三",
        //     "病人身份证号": "369258147",
        //     "病人类型": "贫困户"
        // }
        // ],
        currentRowClassName: 'currentRow', // 突出显示行
        currentColClassName: 'currentCol', // 突出显示列
        minSpareRows: 2, //行留白
        autoWrapRow: false, //自动换行
        minRows: 2,
        trimWhitespace: false, //去除空格
        rowHeaderWidth: 100, //单元格宽度
        stretchH: 'all',
        renderAllRows: false,
        readOnly: true,
        rowHeaders: true, // 行标题   布尔值 / 数组/  函数
        formulas: false, //公式
        copyable: true, // 允许键盘复制
        wordWrap: false, // 自动换行
        copyPaste: true, //复制粘贴
        filters: false, //允许通过内置组件或API过滤表数据
        search: false,
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        columnSorting: true, // 排序
        contextMenu: true, //右键菜单
    },
)

const arr = ref<any>([])
const showMenu = ref(false)


onMounted(() => {
    // scrollHeight.value = window.innerHeight - 231.8 
    sseServiceOpen(queryData.value['缩写'])
})
onUnmounted(() => {
    sseService.disconnect()
})



//see 链接
function sseServiceOpen(url: string) {
    console.log(sseService);

    const onopen = () => {
        console.log("建立无敌 sse 连接成功")
    }
    // 建立连接
    let sseChatParams: SSEChatParams = {
        onopen,
        url: setUrl(url),
        onmessage: (event: MessageEvent) => {
            // 收到消息
            console.log('收到消息菜单：', event.data);
            let fst = event.data.replace(/\\n/g, "\n")
            const pap = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
            console.log('解析解析', pap);
            // console.log(hotTableRef.value);setColHeaders
            // settings.value.colHeaders = pap.meta.fields
            // hotTableRef.value.hotInstance.loadData(pap.data)

            directory.value = pap.data
            console.log(settings.value);
            // directory.value = directory.value.concat(pap.data)

        },
        finallyHandler: () => {
            console.log("finallyHandler操作")
        }
    };
    sseService.connect(sseChatParams)


}


function itemclick(val: any) {
    console.log('valvalvalval', val, breadcrumbItem.value);
    // let value = JSON.stringify(val)
    // let str = encodeURIComponent(value)
    if (val['文件格式'] == 'docx') {
        router.push({ path: '/showWord', query: { wjsx: val['缩写'] ,yysx:queryData.value['缩写']} });
    } else if (val['文件格式'] == 'xlsx') {
        router.push({ path: '/showExcel', query: { wjsx: val['缩写'] ,yysx:queryData.value['缩写']} });
    } else {
        let url = queryData.value['缩写']
        breadcrumbItem.value.push(val)
        if (breadcrumbItem.value.length > 0) {
            for (let index = 0; index < breadcrumbItem.value.length; index++) {
                const element = breadcrumbItem.value[index];
                console.log(element);

                if (index == 0) {
                    url += '/' + element['缩写']
                }
                if (index > 0) {
                    url += '-' + element['缩写']
                }

            }
        }
        console.log('arr.value', url, breadcrumbItem.value);
        // console.log('arr.value',arr.value,url,breadcrumbItem.value);



        // let url = queryData.value['缩写'] + '/' + val['缩写']
        sseServiceOpen(url)
    }
}

function breadItem(val: any, num: any) {
    // console.log(val, num);
    let url = queryData.value['缩写']
    for (let index = 0; index < breadcrumbItem.value.length; index++) {
        const element = breadcrumbItem.value[index];

        if (index <= num) {
            console.log(element);
            if (index == 0) {
                url += '/' + element['缩写']
            }
            if (index > 0) {
                url += '-' + element['缩写']
            }
        }


    }
    // console.log('arr.value',breadcrumbItem.value, url,);

    sseServiceOpen(url)
    breadcrumbItem.value.splice(num + 1, breadcrumbItem.value.length)


}



function breadItem0() {
    let url = queryData.value['缩写']
    sseServiceOpen(url)
    breadcrumbItem.value = []
}
function iconClick() {
    showMenu.value = !showMenu.value
}


// "类型": "数据",
//     "内容": {
//         "应用名称": "应用文档测试",
//         "名称": "测试文档二",
//         "内容": {
//             "月份": ["6", "7", "8"],
//             "casjk": "idwio"
//         },
//     }




const iconItemClick = (val: any) => {
    if (val.name == '新建' || val.name == '编辑') {
        let value = JSON.stringify(val)
        let str = encodeURIComponent(value)
        if (queryData.value['类型'] == 'word') {
            router.push({
                path: '/word',
                query:{sx:queryData.value['缩写'],name:queryData.value['应用名称']}
            })
        } else if (queryData.value['类型'] == 'excel') {
            router.push({
                path: '/excel',
                query:{sx:queryData.value['缩写'],name:queryData.value['应用名称']}
            })
        }
    }
}


</script>
<template>
    <baseCard :headShow="true" ref="baseCardRef"  id="baseCardRef" >
        <template #headers>
            <iconbtn :title="queryData['应用名称']" :icon-name="queryData['图标名']" :show-menu="showMenu" :data="iconList"
                :is-icon="3" @show-menu-click="iconClick" @icon-btn-item="iconItemClick"></iconbtn>
        </template>
        <n-breadcrumb>
            <n-breadcrumb-item @click="breadItem0">
                <n-icon /> {{ queryData['应用名称'] }}
            </n-breadcrumb-item>
            <n-breadcrumb-item v-for="(i, k) in breadcrumbItem" :key="k" clickable @click="breadItem(i, k)">
                <n-icon /> {{ i['文件名'] }}
            </n-breadcrumb-item>
        </n-breadcrumb>
        <div style="height: 100%;">
            <div >
                <div class="lay">
                    <div v-for=" (item, index) in directory" style=" text-align: center; padding: 10px"
                        @dblclick="itemclick(item)">
                        <div v-if="item['文件格式'] == 'word' || item['文件格式'] == 'excel'">
                            <svgIcon icon-name="#icon-wenjianjia3"></svgIcon>
                            <div style="width: 100px;"> {{ item['文件名'] }}</div>
                        </div>
                        <div v-else>
                            <svgIcon v-if="item['文件格式'] === 'docx'" icon-name="#icon-WORD"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'xlsx'" icon-name="#icon-PC-Excel"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'echars-excel'" icon-name="#icon-PC-Excel"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'formdata'" icon-name="#icon-PC-Excel"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'echars-excel'" icon-name="#icon-PC-Excel"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'echars-word'" icon-name="#icon-PC-Excel"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'echars-3d'" icon-name="#icon-PC-Excel"></svgIcon>
                            <svgIcon v-if="item['文件格式'] === 'echars-excel'" icon-name="#icon-PC-Excel"></svgIcon>
                            <div style="width: 100px;"> {{ item['文件名'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </baseCard>
</template>

<style src="./index.scss" scoped></style>
